<template>
  <div class="login">
    <div class="background">
      <div class="exitLogin" @click="closeLogin">x</div>
    </div>
    <div class="main">
      <el-form :model="userForm" ref="loginValidateForm" :rules="formRules">
        <el-form-item prop="phoneNum">
          <el-input
            v-model="userForm.phoneNum"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="userForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%"
            round
            @click="login(userForm)"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%"
            round
            @click="regisiter(userForm)"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { _login } from "network/user";
export default {
  name: "login",
  data() {
    return {
      userForm: {
        phoneNum: "",
        password: "",
      },
      formRules: {
        phoneNum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              let phoneReg = new RegExp(/^1[3456789]\d{9}$/);
              if (!phoneReg.test(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    closeLogin() {
      let showLogin = false;
      this.$emit("close", showLogin);
    },
    login(fromData) {
      let params = {
        phone: fromData.phoneNum,
        password: fromData.password,
      };
      this.$refs.loginValidateForm.validate((valid) => {
        if (valid) {
          _login(params.phone, params.password)
            .then((res) => {
              console.log(res);
              if (res.data.code === 200) {
                  let userStorage = {
                      cookie: res.data.cookie,
                      avatar: res.data.profile.avatarUrl,
                      uid: res.data.profile.userId
                  }
                  localStorage.setItem('userInfo',JSON.stringify(userStorage))
                  this.$Toast({
                    content: '登录成功',
                    duration: 1000
                  })
                  this.$emit('successed',userStorage.avatar)
                  this.closeLogin()
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
        //   console.log("err login");
          return false;
        }
      });
    },
    regisiter() {},
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 25rem;
  height: 40rem;
  position: absolute;
  top: calc(50vh - 25rem);
  left: calc(50vw - 10rem);
  background: rgb(241, 237, 170);
  z-index: 1000;
}
.background {
  width: 100%;
  height: 40%;
  .exitLogin {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    font-weight: 300;
    float: right;
    text-align: center;
    line-height: 2rem;
    cursor: pointer;
    color: rgb(19, 20, 20);
  }
  .exitLogin:hover {
    color: rgb(97, 98, 100);
  }
}
.main {
  width: 100%;
  height: 60%;
  padding: 0 4rem;
}
</style>